<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息更新工具集 - 多网站信息采集与更新工具</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <!-- 保留原有的库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.waves.min.js"></script>
    <script type="module" src="./vantaBackground.js"></script>
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Element Plus 图标 -->
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 250px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transition: all 0.3s ease, left 0.3s ease, transform 0.3s ease;
            transform: translateX(-100%);
            overflow-y: auto; /* 允许侧边栏内容滚动 */
            overflow-x: hidden; /* 防止水平滚动 */
        }
        
        .sidebar.open {
            transform: translateX(0);
        }
        
        @media (min-width: 992px) {
            .sidebar {
                transform: translateX(-100%); /* 大窗口下默认隐藏 */
            }
            
            .sidebar.open {
                transform: translateX(0); /* 大窗口下打开时显示 */
            }
        }
        
        /* 侧边栏遮罩层样式 */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999; /* 低于侧边栏但高于其他内容 */
            display: none; /* 默认隐藏 */
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        /* 小窗口下侧边栏覆盖样式 */
        @media (max-width: 991.98px) {
            .sidebar.open {
                /* 确保侧边栏在小窗口下正确显示 */
                width: 250px;
                z-index: 1050;
            }
            
            /* 侧边栏打开时显示遮罩层 */
            .sidebar.open ~ .sidebar-overlay {
                display: block;
                opacity: 1;
            }
            
            .sidebar.open ~ .main-content {
                /* 确保内容区域不被侧边栏遮挡 */
                margin-left: 0;
                width: 100%;
                padding-left: 20px; /* 保持原有内边距 */
            }
            
            body {
                position: relative; /* 确保定位上下文正确 */
                overflow-x: hidden; /* 防止水平滚动条 */
            }
        }
        
        .sidebar-header {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .sidebar-header h3 {
            color: white;
            margin: 0;
            font-size: 1.5rem;
        }
        
        .sidebar-menu {
            padding: 20px 0;
        }
        
        .menu-category {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.8rem;
            text-transform: uppercase;
            padding: 10px 20px;
            margin-top: 10px;
        }
        
        .menu-item {
            padding: 10px 20px;
            display: flex;
            align-items: center;
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .menu-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .menu-item.active {
            background: rgba(255, 255, 255, 0.2);
            border-left: 8px solid #fe7e4f;
        }
        
        .menu-item i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        /* 主内容区域样式 */
        .main-content {
            margin-left: 0;
            padding: 20px;
            transition: all 0.3s ease, transform 0.3s ease;
            width: 100%;
            position: relative;
            min-height: 100vh; /* 确保内容区域至少占满整个视口高度 */
            overflow-x: hidden; /* 防止水平滚动 */
        }
        
        .main-content.sidebar-open {
            margin-left: 250px;
            width: calc(100% - 250px);
        }
        
        /* 确保内容区域在小窗口模式下侧边栏打开时不被遮挡 */
        @media (max-width: 991.98px) {
            .main-content.mobile-sidebar-open {
                transform: translateX(250px); /* 向右移动内容区域，与侧边栏宽度相同 */
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 991.98px) {
            .main-content {
                width: 100%;
                margin-left: 0;
                transition: transform 0.3s ease, margin-left 0.3s ease, width 0.3s ease;
            }
            
            .main-content.sidebar-open {
                margin-left: 0;
                width: 100%;
                transform: translateX(0);
            }
            
            /* 小窗口模式下侧边栏打开时的内容区域样式 */
            .main-content.mobile-sidebar-open {
                transform: translateX(250px); /* 向右移动内容区域，与侧边栏宽度相同 */
            }
            
            .sidebar {
                z-index: 1050;
                width: 250px; /* 确保侧边栏宽度一致 */
                left: -250px; /* 初始位置在屏幕外 */
                transform: translateX(0); /* 重置transform */
            }
            
            .sidebar.open {
                left: 0; /* 打开时移动到屏幕内 */
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            }
            
            /* 确保侧边栏打开时内容区域不被遮挡 */
            body.sidebar-open {
                overflow: hidden; /* 防止页面滚动 */
            }
        }
        
        @media (min-width: 992px) {
            .menu-toggle {
                display: none;
            }
        }
        
        .container {
            background: rgba(255, 255, 255, 0.427);
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .header {
            background: transparent;
            color: white;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 1;
            height: 40px;
        }
        
        .header h1 {
            margin: 0;
            font-size: 1.8rem;
        }
        
        /* 汉堡菜单按钮 */
        .menu-toggle {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 1001;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .tab {
            padding: 15px 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            color: #555;
            position: relative;
            
        }
        
        .tab:hover {
            background-color: rgba(255, 255, 255, 0.8);
            color: #4facfe;
        }
        
        .tab.active {
            color: #4facfe;
            font-weight: bold;
            background-color: white;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .content {
            padding: 20px;
        }
        
        /* 表单样式 - 使用Bootstrap 5 */
        .form-group {
            margin-bottom: 1rem;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .form-group:hover {
            transform: translateY(-2px);
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #333;
            font-size: 0.95em;
            transition: all 0.3s ease;
        }
        
        .form-group:hover label {
            color: #4facfe;
        }
        
        /* 使用Bootstrap的表单控件样式 */
        .form-control {
            display: block;
            width: 100%;
            min-width: 180px;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        
        .form-control:focus {
            color: #212529;
            background-color: #fff;
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        
        .form-control:hover {
            border-color: #adb5bd;
        }
        
        .form-select {
            display: block;
            width: 100%;
            padding: 0.375rem 2.25rem 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px 12px;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            appearance: none;
        }
        
        .section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            background: #f9f9f9;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .section:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        
        /* 搜索目标范围区域 */
         .target-section {
             margin-bottom: 20px;
             padding: 15px;
             border: 1px solid #e0e0e0;
             border-radius: 10px;
             background: #f9f9f9;
             box-shadow: 0 2px 10px rgba(0,0,0,0.05);
             transition: all 0.3s ease;
         }
         
         .target-section:hover {
             box-shadow: 0 4px 15px rgba(0,0,0,0.1);
             transform: translateY(-2px);
         }
        
        .section h3 {
            color: #333;
            margin-bottom: 12px;
            font-size: 1em;
            font-weight: 600;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            position: relative;
        }
        
        .section h3::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 50px;
            height: 2px;
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .target-ranges {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 6px;
            margin-bottom: 5px;
            max-width: 98%;
            margin-left: auto;
            margin-right: auto;
            padding: 0;
        }
        
        .range-item {
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            padding: 5px 8px;
            border-radius: 6px;
            font-size: 0.8em;
            display: flex;
            flex-direction: column;
            gap: 2px;
            box-shadow: 0 2px 40px rgba(0,0,0,0.08);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .range-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 60px rgba(0,0,0,0.12);
        }
        
        .range-item strong {
            color: #4361ee;
            margin: 0;
            font-size: 0.9em;
            border-bottom: 1px solid #e9ecef;
            padding-bottom: 3px;
            display: block;
        }
        
        .range-item span {
            color: #495057;
            line-height: 1.3;
            font-size: 0.85em;
        }
        
        .range-item strong {
            color: #333;
            display: block;
            margin-bottom: 5px;
        }
        
        /* 控制面板样式 */
        .control-panel {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
            background: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            border: 1px solid #e0e0e0;
        }
        
        .control-panel:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .control-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
            flex: 1;
        }

        .control-option {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .option-label {
            min-width: 90px;
            font-weight: 500;
            color: #333;
            font-size: 0.9em;
        }

        .control-actions {
            display: flex;
            gap: 10px;
            align-self: center;
            margin-left: 20px;
        }
        
        /* 控制面板中的按钮样式覆盖 */
        .control-actions .btn {
            margin: 0;
            border: none;
            box-sizing: border-box;
            max-width: 100%;
            width: auto; /* 使按钮宽度自适应内容 */
            min-width: 0; /* 覆盖默认的最小宽度 */
            padding: 8px 12px; /* 更紧凑的内边距 */
        }
        
        /* 响应式布局 */
        @media (max-width: 768px) {
            .control-panel {
                flex-direction: column;
                gap: 15px;
                padding: 10px;
                box-sizing: border-box; /* 确保内边距不会增加总宽度 */
                width: 100%; /* 确保控制面板不超出父容器 */
            }
            
            .control-options {
                width: 100%; /* 确保选项容器占满宽度 */
            }
            
            .control-actions {
                align-self: center; /* 居中对齐 */
                margin-left: 0;
                margin-top: 5px;
                width: 100%;
                justify-content: center; /* 按钮居中 */
                gap: 8px; /* 减小按钮之间的间距 */
            }
            
            .control-actions .btn {
                flex: 0 1 auto; /* 不强制拉伸，但允许收缩 */
                margin: 0; /* 移除所有边距 */
                padding: 6px 10px; /* 更小的内边距 */
                font-size: 0.85em; /* 稍微减小字体大小 */
            }
        }
        
        .controls {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin: 30px 0;
        }
        
        /* 使用Bootstrap 5的按钮样式 */
        .btn {
            display: inline-block;
            font-weight: 400;
            line-height: 1.5;
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            background-color: transparent;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            border-radius: 0.375rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            margin: 0;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: fit-content;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .btn:disabled {
            pointer-events: none;
            opacity: 0.65;
        }
        
        /* 按钮变体样式 */
        .btn-primary {
            color: #fff;
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        
        .btn-primary:hover {
            color: #fff;
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }
        
        .btn-success {
            color: #fff;
            background-color: #198754;
            border-color: #198754;
        }
        
        .btn-success:hover {
            color: #fff;
            background-color: #157347;
            border-color: #146c43;
        }
        
        .btn-danger {
            color: #fff;
            background-color: #dc3545;
            border-color: #dc3545;
        }
        
        .btn-danger:hover {
            color: #fff;
            background-color: #bb2d3b;
            border-color: #b02a37;
        }
        
        .btn-warning {
            color: #000;
            background-color: #ffc107;
            border-color: #ffc107;
        }
        
        .btn-warning:hover {
            color: #000;
            background-color: #ffca2c;
            border-color: #ffc720;
        }
        
        .btn-info {
            color: #000;
            background-color: #0dcaf0;
            border-color: #0dcaf0;
        }
        
        .btn-info:hover {
            color: #000;
            background-color: #31d2f2;
            border-color: #25cff2;
        }
        
        /* 按钮大小变体 */
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            border-radius: 0.25rem;
        }
        
        .btn-lg {
            padding: 0.5rem 1rem;
            font-size: 1.25rem;
            border-radius: 0.5rem;
        }
        
        /* 轮廓按钮样式 */
        .btn-outline-primary {
            color: #0d6efd;
            border-color: #0d6efd;
            background-color: transparent;
        }
        
        .btn-outline-primary:hover {
            color: #fff;
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        
        .btn-outline.btn-primary {
            color: #4facfe;
            border-color: #4facfe;
        }
        
        .btn-outline.btn-success {
            color: #2ecc71;
            border-color: #2ecc71;
        }
        
        .btn-outline.btn-danger {
            color: #ff6b6b;
            border-color: #ff6b6b;
        }
        
        .btn-outline.btn-warning {
            color: #fdcb6e;
            border-color: #fdcb6e;
        }
        
        .btn-outline.btn-info {
            color: #74b9ff;
            border-color: #74b9ff;
        }
        
        .btn-outline:hover {
            color: white;
        }
        
        .btn-outline.btn-primary:hover {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .btn-outline.btn-success:hover {
            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
        }
        
        .btn-outline.btn-danger:hover {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5253 100%);
        }
        
        .btn-outline.btn-warning:hover {
            background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
            color: #333;
        }
        
        .btn-outline.btn-info:hover {
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
        }
        
        /* 浏览按钮专用样式 - 简洁版 */
        .btn-browse {
            background-color: #f8f9fa;
            color: #495057;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 0.75rem;
            font-weight: 400;
            transition: all 0.2s ease;
        }
        
        .btn-browse:hover {
            background-color: #e9ecef;
            border-color: #adb5bd;
            color: #495057;
        }
        
        .btn-browse:active {
            background-color: #dee2e6;
            border-color: #adb5bd;
        }
        
        .btn-browse:focus {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        
        /* 输入组样式 */
        .input-group {
            display: flex;
            align-items: stretch;
            width: 100%;
        }
        
        .input-group .form-control {
            flex: 1;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: 0;
        }
        
        .input-group .btn-browse {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: 1px solid #dee2e6;
            margin-left: 8px;
            height: auto;
        }
        
        /* 图标按钮样式 */
        .btn-icon {
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn-icon.btn-sm {
            width: 32px;
            height: 32px;
        }
        
        .btn-icon.btn-lg {
            width: 48px;
            height: 48px;
        }
        
        /* 按钮组样式 */
        .btn-group {
            display: inline-flex;
        }
        
        .btn-group .btn {
            border-radius: 0;
            margin: 0;
        }
        
        .btn-group .btn:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        
        .btn-group .btn:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }
        
        /* 响应式按钮样式 */
        @media (max-width: 768px) {
            .btn {
                padding: 10px 20px;
                font-size: 0.9em;
                margin: 0 5px;
                white-space: normal;
                min-width: fit-content;
                overflow: visible;
            }
            
            .controls {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
            }
            
            .btn-sm {
                padding: 6px 12px;
                font-size: 0.8em;
            }
            
            .btn-lg {
                padding: 12px 24px;
                font-size: 1em;
            }
        }
        
        @media (max-width: 480px) {
            .btn {
                padding: 8px 16px;
                font-size: 0.85em;
                margin: 0 3px;
                margin-bottom: 8px;
                white-space: normal;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: fit-content;
                overflow: visible;
            }
            
            .controls {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 8px;
            }
            
            .btn-group {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                width: auto;
            }
            
            .btn-group .btn {
                border-radius: 8px;
                margin-bottom: 5px;
                width: auto;
                white-space: normal;
                min-width: fit-content;
                overflow: visible;
            }
        }
        
        /* 按钮动画效果 */
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
        
        .btn-primary:not(:disabled):hover {
            animation: pulse 1s infinite;
        }
        
        .btn-success:not(:disabled) {
            position: relative;
            overflow: hidden;
        }
        
        .btn-success:not(:disabled)::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255,255,255,0.1);
            transform: rotate(45deg);
            transition: all 0.3s;
            opacity: 0;
        }
        
        .btn-success:not(:disabled):hover::after {
            opacity: 1;
            transform: rotate(45deg) translate(50%, 50%);
        }
        
        /* Bootstrap 5 结果区域样式 */
        .results {
            background: white;
            border-radius: 0.375rem;
            padding: 1.25rem;
            margin-top: 1rem;
            max-height: 400px;
            overflow-y: auto;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        
        .results:hover {
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
        }
        
        .results h4 {
            color: #212529;
            margin-bottom: 1rem;
            font-weight: 500;
        }
        
        /* Bootstrap 5 JSON数据显示区域样式 */
        .json-display {
            background: #f8f9fa;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1.25rem;
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.875rem;
            position: relative;
            z-index: 2;
        }
        
        .json-display pre {
            white-space: pre-wrap;
            word-break: break-all;
            margin: 0;
            max-height: 200px;
            overflow: auto;
            padding: 0.5rem;
            background-color: #e9ecef;
            border-radius: 0.25rem;
        }
        
        .json-display h5 {
            margin: 0 0 0.75rem 0;
            color: #212529;
            font-size: 1rem;
            font-weight: 500;
        }
        
        .json-display button {
            margin-top: 0.75rem;
            padding: 0.25rem 0.5rem;
            background-color: #0d6efd;
            color: white;
            border: none;
            border-radius: 0.25rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: background-color 0.15s ease-in-out;
        }
        
        .json-display button:hover {
            background-color: #0b5ed7;
        }
        
        /* Bootstrap 5 结果项样式 */
        .result-item {
            background: #f8f9fa;
            padding: 0.75rem 1rem;
            margin: 0.5rem 0;
            border-radius: 0.375rem;
            border-left: 4px solid #198754;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
            transition: all 0.2s ease-in-out;
        }
        
        .result-item:hover {
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
            transform: translateX(2px);
            background: #e9ecef;
        }
        
        /* EU Commission 错误项样式 */
        .result-item.error-item {
            border-left-color: #dc3545;
            background: #f8d7da;
            color: #721c24;
        }
        
        .result-item.error-item:hover {
            background: #f1aeb5;
        }
        
        .result-item .result-status {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .result-item .result-status.success {
            color: #198754;
        }
        
        .result-item .result-status.error {
            color: #dc3545;
        }
        
        .result-item .result-url,
        .result-item .result-standard,
        .result-item .result-date,
        .result-item .result-brief,
        .result-item .result-error,
        .result-item .result-time {
            margin-bottom: 0.25rem;
            font-size: 0.9rem;
        }
        
        .result-item .result-url a {
            color: #0d6efd;
            text-decoration: none;
        }
        
        .result-item .result-url a:hover {
            text-decoration: underline;
        }
        
        .result-item .result-error {
            color: #dc3545;
            font-weight: 500;
        }
        
        /* Bootstrap 5 日志区域样式 */
        .log {
            background: #212529;
            color: #20c997;
            padding: 1rem;
            border-radius: 0.375rem;
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.875rem;
            max-height: 300px;
            overflow-y: auto;
            margin-top: 1rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
            transition: all 0.3s ease;
        }
        
        .log:hover {
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
        }
        
        /* Bootstrap 5 日志类型样式 */
        .log-info {
            color: #f8f9fa;
            margin-bottom: 0.125rem;
        }
        
        .log-error {
            color: #dc3545;
            margin-bottom: 0.125rem;
        }
        
        .log-warning {
            color: #ffc107;
            margin-bottom: 0.125rem;
        }
        
        .log-success {
            color: #198754;
            margin-bottom: 0.125rem;
        }
        
        /* Bootstrap 5 进度条样式覆盖 */
        .progress {
            width: 100%;
            height: 8px;
            background-color: #e9ecef;
            border-radius: 0.25rem;
            overflow: hidden;
            margin: 15px 0;
        }
        
        .progress-bar {
            height: 100%;
            background-color: #0d6efd;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        /* 进度条颜色变体 */
        .progress-bar-success {
            background-color: #198754;
        }
        
        .progress-bar-info {
            background-color: #0dcaf0;
        }
        
        .progress-bar-warning {
            background-color: #ffc107;
        }
        
        .progress-bar-danger {
            background-color: #dc3545;
        }
        
        /* Vanta 背景容器样式 */
        .vanta-container {
            width: 100%;
            height: 100vh; /* 占据整个视口的高度 */
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }
        
        /* 添加 Element Plus 消息提示的样式覆盖 */
        .el-message {
            z-index: 9999 !important;
        }
        
        /* CEN结果样式 */
        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px 15px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        
        .results-header h4 {
            margin: 0;
            color: #495057;
            font-size: 1.1em;
        }
        
        .results-stats {
            display: flex;
            gap: 15px;
        }
        
        .stat-item {
            background: #fff;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.85em;
            color: #6c757d;
            border: 1px solid #e9ecef;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .results-table {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .results-table table {
            width: 100%;
            margin: 0;
        }
        
        .results-table th {
            background: linear-gradient(135deg, #495057 0%, #6c757d 100%);
            color: #fff;
            font-weight: 600;
            padding: 12px 15px;
            text-align: left;
            border: none;
            font-size: 0.9em;
        }
        
        .results-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #e9ecef;
            vertical-align: top;
            font-size: 0.9em;
        }
        
        .results-table tr:hover {
            background-color: #f8f9fa;
        }
        
        .results-table tr:last-child td {
            border-bottom: none;
        }
        
        .tc-badge {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: #fff;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: 500;
            display: inline-block;
            box-shadow: 0 1px 3px rgba(0,123,255,0.3);
        }
        
        /* CEN进度条样式 */
        #cen-progress-container {
            position: relative;
            background-color: #e9ecef;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 10px;
        }
        
        #cen-progress-bar {
            height: 20px;
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            transition: width 0.3s ease;
            border-radius: 8px;
        }
        
        #cen-progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #495057;
            font-size: 0.8em;
            font-weight: 600;
            z-index: 1;
        }
        
        /* 开关容器样式 */
        .switch-container{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        
        /* 开关样式 */
        .checkbox-wrapper-35 {
            margin-bottom: 10px;
        }
        
        .checkbox-wrapper-35 .switch {
            display: none;
        }
        
        .checkbox-wrapper-35 .switch + label {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            color: #27272f;
            cursor: pointer;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 12px;
            line-height: 15px;
            position: relative;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        .checkbox-wrapper-35 .switch + label::before,
        .checkbox-wrapper-35 .switch + label::after {
            content: '';
            display: block;
        }
        
        .checkbox-wrapper-35 .switch + label::before {
            background-color: #05012c;
            border-radius: 500px;
            height: 20px;
            margin-right: 8px;
            -webkit-transition: background-color 0.125s ease-out;
            transition: background-color 0.125s ease-out;
            width: 40px;
        }
        
        .checkbox-wrapper-35 .switch + label::after {
            background-color: #fff;
            border-radius: 13px;
            box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05);
            height: 18px;
            left: 1px;
            position: absolute;
            top: 1px;
            -webkit-transition: -webkit-transform 0.125s ease-out;
            transition: -webkit-transform 0.125s ease-out;
            transition: transform 0.125s ease-out;
            transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
            width: 18px;
        }
        
        .checkbox-wrapper-35 .switch + label .switch-x-text {
            display: block;
            margin-right: .3em;
        }
        
        .checkbox-wrapper-35 .switch + label .switch-x-toggletext {
            display: block;
            font-weight: bold;
            height: 15px;
            overflow: hidden;
            position: relative;
            width: 40px;
        }
        
        .checkbox-wrapper-35 .switch + label .switch-x-unchecked,
        .checkbox-wrapper-35 .switch + label .switch-x-checked {
            left: 0;
            position: absolute;
            top: 0;
            -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
            transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
            transition: transform 0.125s ease-out, opacity 0.125s ease-out;
            transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out;
        }
        
        .checkbox-wrapper-35 .switch + label .switch-x-unchecked {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
        
        .checkbox-wrapper-35 .switch + label .switch-x-checked {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        
        .checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel {
            position: absolute;
            visibility: hidden;
        }
        
        .checkbox-wrapper-35 .switch:checked + label::before {
            background-color: #ffb500;
        }
        
        .checkbox-wrapper-35 .switch:checked + label::after {
            -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
        }
        
        .checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
        
        .checkbox-wrapper-35 .switch:checked + label .switch-x-checked {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
        
        /* Technical Update 数据源配置样式 */
        .data-sources {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .source-item {
            display: flex;
            align-items: center;
            padding: 10px;
            margin-bottom: 8px;
            background: white;
            border-radius: 6px;
            border-left: 4px solid #dee2e6;
            transition: all 0.3s ease;
        }
        
        .source-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transform: translateY(-1px);
        }
        
        .source-name {
            font-weight: 600;
            color: #495057;
            min-width: 120px;
            margin-right: 15px;
        }
        
        .source-path {
            font-family: 'Courier New', monospace;
            color: #6c757d;
            background: #f1f3f4;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.9em;
            flex-grow: 1;
            margin-right: 15px;
        }
        
        .source-status {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: 500;
            min-width: 60px;
            text-align: center;
        }
        
        .source-status.detected {
            background: #d4edda;
            color: #155724;
            border-left-color: #28a745;
        }
        
        .source-status.not-detected {
            background: #f8d7da;
            color: #721c24;
            border-left-color: #dc3545;
        }
        
        .source-status.checking {
            background: #fff3cd;
            color: #856404;
            border-left-color: #ffc107;
        }
        
        .source-item.detected {
            border-left-color: #28a745;
        }
        
        .source-item.not-detected {
            border-left-color: #dc3545;
        }
        
        .source-item.checking {
            border-left-color: #ffc107;
        }
        
        .source-checkbox {
            margin-right: 10px;
            transform: scale(1.2);
            cursor: pointer;
        }
        
        .source-checkbox:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }
        
        .description {
            color: #6c757d;
            font-size: 0.95em;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        
        .result-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            border-left: 4px solid #28a745;
        }
        
        .result-actions {
            margin-top: 15px;
            display: flex;
            gap: 10px;
        }
        
        .progress-container {
            margin: 20px 0;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e9ecef;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 10px;
        }
        
        .progress-text {
            text-align: center;
            margin-top: 5px;
            font-weight: 500;
            color: #495057;
        }
        </style>
    <!-- Bootstrap 5 JS 和 Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div id="vantaRef" class="vanta-container"></div>
    <div id="plugin-info-container"></div>
    
    <!-- 侧边栏遮罩层 -->
    <div class="sidebar-overlay" id="sidebar-overlay"></div>
    
    <!-- 侧边栏导航 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>Infomation Update</h3>
        </div>
        <div class="sidebar-menu">
            <div class="menu-category">内容更新</div>
            <div class="menu-item active" data-tab="cfr-scraper">
                <i class="bi bi-file-earmark-text"></i>
                Govinfo
            </div>
            <div class="menu-item" data-tab="data-update">
                <i class="bi bi-arrow-repeat"></i>
                ASTM
            </div>
            <div class="menu-item" data-tab="batch-process">
                <i class="bi bi-collection"></i>
                CEN
            </div>
            <div class="menu-item" data-tab="eu-commission">
                <i class="bi bi-globe-europe-africa"></i>
                EU Commission
            </div>
            
            <div class="menu-category">工具</div>
            <div class="menu-item" data-tab="data-compare">
                <i class="bi bi-bar-chart"></i>
                Technical Update
            </div>
            <div class="menu-item" data-tab="format-convert">
                <i class="bi bi-arrow-left-right"></i>
                xxx
            </div>
            
            <div class="menu-category">系统</div>
            <div class="menu-item" data-tab="settings">
                <i class="bi bi-gear"></i>
                设置
            </div>
            <div class="menu-item" data-tab="help">
                <i class="bi bi-question-circle"></i>
                帮助
            </div>
        </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content" id="main-content">
        
        <div id="app" class="container">
            <div class="header">
                <button class="menu-toggle" id="menu-toggle">
                    <i class="bi bi-list"></i>
                </button>
            </div>
        <div class="content">
            <!-- Govinfo 搜索更新 -->
            <div class="tab-content active" id="cfr-scraper-content">
                <div class="target-section">
                    <h3 style="margin-bottom: 6px; font-size: 0.95em;">🎯 搜索目标范围</h3>
                    <div class="target-ranges">
                        <div class="range-item">
                            <strong>Title 16</strong>
                            <span>CFR part 300-323, 423, 500-503, 1000+</span>
                        </div>
                        <div class="range-item">
                            <strong>Title 21</strong>
                            <span>CFR part 800-898</span>
                        </div>
                        <div class="range-item">
                            <strong>Title 49</strong>
                            <span>CFR part 500-599</span>
                        </div>
                        <div class="range-item">
                            <strong>Title 10</strong>
                            <span>CFR part 429</span>
                        </div>
                        <div class="range-item">
                            <strong>Title 19</strong>
                            <span>CFR part 134.0-134.55</span>
                        </div>
                        <div class="range-item">
                            <strong>Title 47</strong>
                            <span>CFR part 15.1-15.717</span>
                        </div>
                    </div>
                </div>
                
                <div class="section">
                    <h3 style="margin-bottom: 15px; font-size: 1em;">🚀 控制面板</h3>
                    
                    <div class="control-panel">
                        <!-- 左侧控制选项 -->
                        <div class="control-options">
                            <!-- 浏览器显示/隐藏开关 -->
                            <div class="control-option">
                                <div class="option-label">浏览器模式:</div>
                                <div class="checkbox-wrapper-35">
                                    <input 
                                        type="checkbox" 
                                        id="headless-switch" 
                                        class="switch"
                                    />
                                    <label for="headless-switch">
                                        <span class="switch-x-text"></span>
                                        <span class="switch-x-toggletext">
                                            <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>隐藏</span>
                                            <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>显示</span>
                                        </span>
                                    </label>
                                </div>
                            </div>
                            
                            <!-- 时间框架选择 -->
                            <div class="control-option">
                                <div class="option-label">时间框架:</div>
                                <select id="timeframeSelect" class="form-select" style="width: 180px;">
                                    <option value="Past 24 Hours">Past 24 Hours</option>
                                    <option value="Past 7 Days" selected>Past 7 Days</option>
                                    <option value="Past 30 Days">Past 30 Days</option>
                                    <option value="Past 180 Days">Past 180 Days</option>
                                    <option value="Past 365 Days">Past 365 Days</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- 右侧操作按钮 -->
                        <div class="control-actions">
                            <button class="btn btn-primary btn-sm" id="startBtn" disabled>开始搜索</button>
                            <button class="btn btn-danger btn-sm" id="stopBtn" disabled>停止搜索</button>
                        </div>
                    </div>
                    
                    <!-- 状态和进度条 -->
                    <div class="progress" id="progressContainer" style="display: none;">
                        <div class="progress-bar" id="progressBar"></div>
                    </div>
                </div>
                
                <div class="section">
                    <h3 style="margin-bottom: 6px; font-size: 0.95em;">📊 消息提示</h3>
                    <div id="results" class="results">
                        <p style="text-align: center; color: #666;">点击"开始搜索"来获取结果</p>
                    </div>
                </div>
                
                <div class="section">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                        <h3 style="margin: 0; font-size: 0.95em;">📝 运行日志</h3>
                        <button class="btn btn-outline-secondary btn-sm" id="clear-log-btn" title="清空日志">
                            <i class="bi bi-trash"></i> 清空
                        </button>
                    </div>
                    <div id="log" class="log">等待操作...</div>
                </div>
            </div>
            
            <!-- ASTM更新标签页 -->
            <div class="tab-content" id="data-update-content">
                <div class="section">
                    <h3>🔄 ASTM标准更新</h3>
                    <div class="control-panel">
                        <div class="control-options">
                            <!-- 浏览器模式开关 -->
                            <!-- 
                                开关状态与浏览器显示/隐藏模式的对应关系：
                                - 未选中（默认）：浏览器隐藏模式 (isAstmHeadless=false)
                                - 选中：浏览器显示模式 (isAstmHeadless=true)
                                注意：在astm-core.js中，此值会被反转，因为playwright的headless参数与UI提示的含义相反
                            -->
                            <div class="control-option">
                                <div class="option-label">浏览器模式:</div>
                                <div class="checkbox-wrapper-35">
                                    <input 
                                        type="checkbox" 
                                        id="astm-headless-switch" 
                                        class="switch"
                                    />
                                    <label for="astm-headless-switch">
                                        <span class="switch-x-text"></span>
                                        <span class="switch-x-toggletext">
                                            <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>隐藏</span>
                                            <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>显示</span>
                                        </span>
                                    </label>
                                </div>
                            </div>
                         </div>
                         
                         <!-- 右侧操作按钮 -->
                         <div class="control-actions">
                             <button class="btn btn-info btn-sm" id="astmFetchBtn">获取ASTM更新</button>
                             <button class="btn btn-warning btn-sm" id="astmStopBtn" disabled>停止获取</button>
                             <button class="btn btn-success btn-sm" id="astmExportBtn">导出更新数据</button>
                         </div>
                    </div>
                    
                    <!-- 状态和进度条 -->
                    <div class="progress" id="astm-progress-container" style="display: none;">
                        <div class="progress-bar" id="astm-progress-bar"></div>
                        <div class="progress-text" id="astm-progress-text">0%</div>
                    </div>
                    
                    <div class="section">
                        <h3>📋 Technical Committees 范围配置</h3>
                        <div class="form-group">
                            <div class="target-ranges">
                                <div class="range-item">
                                    <strong>F06</strong>
                                    <span>Resilient Floor Coverings</span>
                                </div>
                                <div class="range-item">
                                    <strong>F08</strong>
                                    <span>Sports Equipment, Playing Surfaces, and Facilities</span>
                                </div>
                                <div class="range-item">
                                    <strong>F15</strong>
                                    <span>Consumer Products</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="section">
                        <h3>📊 消息提示</h3>
                        <div id="astm-results" class="results">
                            <p style="text-align: center; color: #666;">点击"获取ASTM更新"来获取结果</p>
                        </div>
                    </div>
                    
                    <div class="section">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                            <h3 style="margin: 0;">📝 运行日志</h3>
                            <button class="btn btn-outline-secondary btn-sm" id="clear-astm-log-btn" title="清空日志">
                                <i class="bi bi-trash"></i> 清空
                            </button>
                        </div>
                        <div id="astm-log" class="log">等待操作...</div>
                    </div>
                </div>
            </div>
            
            <!-- CEN标准更新标签页 -->
            <div class="tab-content" id="batch-process-content">
                <div class="target-section">
                    <h3 style="margin-bottom: 6px; font-size: 0.95em;">🎯 目标技术委员会 (TC)</h3>
                    <div class="target-ranges">
                        <div class="range-item">
                            <strong>CEN/TC 33</strong>
                            <span>Doors, windows, shutters, building hardware and curtain walling</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 49</strong>
                            <span>Gas cooking appliances</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 52</strong>
                            <span>Safety of toys</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 67</strong>
                            <span>Ceramic tiles</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 93</strong>
                            <span>Ladders</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 114</strong>
                            <span>Safety of machinery</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 136</strong>
                            <span>Sports, playground and other recreational facilities and equipment</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 158</strong>
                            <span>Head protection</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 162</strong>
                            <span>Protective clothing including hand and arm protection and lifejackets</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 163</strong>
                            <span>Sanitary appliances</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 194</strong>
                            <span>Utensils in contact with food</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 207</strong>
                            <span>Furniture</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 217</strong>
                            <span>Surfaces for sports areas</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 252</strong>
                            <span>Child care articles</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 255</strong>
                            <span>Hand-held, non-electric power tools – Safety</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 333</strong>
                            <span>Cycles</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 355</strong>
                            <span>Lighters</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 364</strong>
                            <span>High chairs and learning towers</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 369</strong>
                            <span>Candle fire safety</span>
                        </div>
                        <div class="range-item">
                            <strong>CEN/TC 402</strong>
                            <span>Domestic Pools and Spas</span>
                        </div>
                    </div>
                </div>
                
                <div class="section">
                    <h3 style="margin-bottom: 15px; font-size: 1em;">🚀 控制面板</h3>
                    
                    <div class="control-panel">
                        <!-- 左侧控制选项 -->
                        <div class="control-options">
                            <!-- 浏览器显示/隐藏开关 -->
                            <div class="control-option">
                                <div class="option-label">浏览器模式:</div>
                                <div class="checkbox-wrapper-35">
                                    <input 
                                        type="checkbox" 
                                        id="cen-headless-switch" 
                                        class="switch"
                                    />
                                    <label for="cen-headless-switch">
                                        <span class="switch-x-text"></span>
                                        <span class="switch-x-toggletext">
                                            <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>隐藏</span>
                                            <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>显示</span>
                                        </span>
                                    </label>
                                </div>
                            </div>
                            
                            <!-- 数据源URL -->
                            <div class="control-option">
                                <div class="option-label">数据源:</div>
                                <input type="text" id="cen-url" class="form-control" 
                                       value="https://standards.cencenelec.eu/dyn/www/f?p=CEN:84:0:::::" 
                                       style="width: 400px; font-size: 12px;" readonly>
                            </div>
                        </div>
                        
                        <!-- 右侧操作按钮 -->
                        <div class="control-actions">
                            <button class="btn btn-primary btn-sm" id="cen-start-btn">开始获取</button>
                            <button class="btn btn-danger btn-sm" id="cen-stop-btn" disabled>停止获取</button>
                            <button class="btn btn-success btn-sm" id="cen-export-btn">导出数据</button>
                        </div>
                    </div>
                    
                    <!-- 状态和进度条 -->
                    <div class="progress" id="cen-progress-container" style="display: none;">
                        <div class="progress-bar" id="cen-progress-bar"></div>
                        <div class="progress-text" id="cen-progress-text">0%</div>
                    </div>
                </div>
                
                <div class="section">
                    <h3 style="margin-bottom: 6px; font-size: 0.95em;">📊 消息提示</h3>
                    <div id="cen-results" class="results">
                        <p style="text-align: center; color: #666;">点击"开始获取"来获取CEN标准更新数据</p>
                    </div>
                </div>
                
                <div class="section">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                        <h3 style="margin: 0; font-size: 0.95em;">📝 运行日志</h3>
                        <button class="btn btn-outline-secondary btn-sm" id="clear-cen-log-btn" title="清空日志">
                            <i class="bi bi-trash"></i> 清空
                        </button>
                    </div>
                    <div id="cen-log" class="log">等待操作...</div>
                </div>
            </div>
            
            <!-- EU Commission标签页 -->
            <div class="tab-content" id="eu-commission-content">
                <div class="target-section">
                    <h3 style="margin-bottom: 6px; font-size: 0.95em;">🎯 目标链接类别</h3>
                    <div class="target-ranges">
                        <div class="range-item">
                            <strong>Construction products (CPD/CPR)</strong>
                            <span>建筑产品法规</span>
                        </div>
                        <div class="range-item">
                            <strong>General product safety</strong>
                            <span>通用产品安全</span>
                        </div>
                        <div class="range-item">
                            <strong>Personal protective equipment (PPE)</strong>
                            <span>个人防护设备</span>
                        </div>
                        <div class="range-item">
                            <strong>Toy safety</strong>
                            <span>玩具安全</span>
                        </div>
                        <div class="range-item">
                            <strong>Low Voltage (LVD)</strong>
                            <span>低电压指令</span>
                        </div>
                        <div class="range-item">
                            <strong>Electromagnetic compatibility (EMC)</strong>
                            <span>电磁兼容性</span>
                        </div>
                        <div class="range-item">
                            <strong>Radio Equipment (RED)</strong>
                            <span>无线电设备指令</span>
                        </div>
                        <div class="range-item">
                            <strong>Medical devices (Regulation 2017/745)</strong>
                            <span>医疗器械法规</span>
                        </div>
                        <div class="range-item">
                            <strong>In vitro diagnostic medical devices (Regulation 2017/746)</strong>
                            <span>体外诊断医疗器械法规</span>
                        </div>
                        <div class="range-item">
                            <strong>Gas appliances (GAR)</strong>
                            <span>燃气器具法规</span>
                        </div>
                        <div class="range-item">
                            <strong>Machinery (MD)</strong>
                            <span>机械指令</span>
                        </div>
                        <div class="range-item">
                            <strong>Recreational craft and personal watercraft</strong>
                            <span>休闲船艇和个人船艇</span>
                        </div>
                        <div class="range-item">
                            <strong>Pressure equipment (PED)</strong>
                            <span>压力设备指令</span>
                        </div>
                        <div class="range-item">
                            <strong>Packaging and packaging waste</strong>
                            <span>包装和包装废料</span>
                        </div>
                        <div class="range-item">
                            <strong>Plastic caps and lids</strong>
                            <span>塑料瓶盖和盖子</span>
                        </div>
                    </div>
                </div>
                
                <div class="section">
                    <h3 style="margin-bottom: 15px; font-size: 1em;">🚀 控制面板</h3>
                    
                    <div class="control-panel">
                        <!-- 左侧控制选项 -->
                        <div class="control-options">
                            <!-- 浏览器显示/隐藏开关 -->
                            <div class="control-option">
                                <div class="option-label">浏览器模式:</div>
                                <div class="checkbox-wrapper-35">
                                    <input 
                                        type="checkbox" 
                                        id="eu-headless-switch" 
                                        class="switch"
                                    />
                                    <label for="eu-headless-switch">
                                        <span class="switch-x-text"></span>
                                        <span class="switch-x-toggletext">
                                            <span class="switch-x-unchecked"><span class="switch-x-hiddenlabel">Unchecked: </span>隐藏</span>
                                            <span class="switch-x-checked"><span class="switch-x-hiddenlabel">Checked: </span>显示</span>
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 右侧操作按钮 -->
                        <div class="control-actions">
                            <button class="btn btn-primary btn-sm" id="eu-start-btn">开始抓取</button>
                            <button class="btn btn-danger btn-sm" id="eu-stop-btn" disabled>停止抓取</button>
                            <button class="btn btn-success btn-sm" id="eu-export-btn">导出数据</button>
                        </div>
                    </div>
                    
                    <!-- 状态和进度条 -->
                    <div class="progress" id="eu-progress-container" style="display: none;">
                        <div class="progress-bar" id="eu-progress-bar"></div>
                        <div class="progress-text" id="eu-progress-text">0%</div>
                    </div>
                </div>
                
                <div class="section">
                    <h3 style="margin-bottom: 6px; font-size: 0.95em;">📊 消息提示</h3>
                    <div id="eu-results" class="results">
                        <p style="text-align: center; color: #666;">点击"开始抓取"来获取EU Commission页面数据,并用AI总结Brief</p>
                    </div>
                </div>
                
                <div class="section">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                        <h3 style="margin: 0; font-size: 0.95em;">📝 运行日志</h3>
                        <button class="btn btn-outline-secondary btn-sm" id="clear-eu-log-btn" title="清空日志">
                            <i class="bi bi-trash"></i> 清空
                        </button>
                    </div>
                    <div id="eu-log" class="log">等待操作...</div>
                </div>
            </div>
            
            <!-- Technical Update标签页 -->
            <div class="tab-content" id="data-compare-content">
                <div class="section">
                    <h3>📊 Technical Update - 技术更新汇总</h3>
                    <p class="description">选择网站内容更新的结果汇总到Word模板中</p>
                </div>
                
                <div class="section">
                    <h3>📁 数据源配置</h3>
                    <div class="form-group">
                        <label>数据源目录:</label>
                        <div class="data-sources">
                            <div class="source-item">
                                <input type="checkbox" class="source-checkbox" id="astm-checkbox" disabled style="display: none;">
                                <span class="source-name">ASTM数据</span>
                                <span class="source-path">astm/data/</span>
                                <span class="source-status" id="astm-status">未检测</span>
                            </div>
                            <div class="source-item">
                                <input type="checkbox" class="source-checkbox" id="govinfo-checkbox" disabled style="display: none;">
                                <span class="source-name">Govinfo数据</span>
                                <span class="source-path">govinfo/data/</span>
                                <span class="source-status" id="govinfo-status">未检测</span>
                            </div>
                            <div class="source-item">
                                <input type="checkbox" class="source-checkbox" id="cen-checkbox" disabled style="display: none;">
                                <span class="source-name">CEN数据</span>
                                <span class="source-path">cen/data/</span>
                                <span class="source-status" id="cen-status">未检测</span>
                            </div>
                            <div class="source-item">
                                <input type="checkbox" class="source-checkbox" id="eu-checkbox" disabled style="display: none;">
                                <span class="source-name">EU Commission数据</span>
                                <span class="source-path">eucommission/data/</span>
                                <span class="source-status" id="eu-status">未检测</span>
                            </div>
                        </div>
                        <button class="btn btn-info btn-sm" id="checkDataSourcesBtn">检测数据源</button>
                    </div>
                </div>
                
                <div class="section">
                    <h3>📄 Word模板配置</h3>
                    <div class="form-group">
                        <label for="wordTemplatePath">Word模板路径:</label>
                        <div class="input-group">
                            <input type="text" id="techUpdateTemplatePath" class="form-control" placeholder="选择Word模板文件..." value="src/plugins/info-update/tech-update/template.docx">
                            <button class="btn btn-browse" id="selectTemplateBtn">浏览</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="outputPath">输出路径:</label>
                        <div class="input-group">
                            <input type="text" id="techUpdateOutputPath" class="form-control" placeholder="默认保存到桌面...">
                            <button class="btn btn-browse" id="selectOutputBtn">浏览</button>
                        </div>
                    </div>
                    
                    <!-- 日期筛选配置 -->
                    <div class="form-group">
                        <label>发布年月筛选:</label>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="filterYear" class="form-label">年份:</label>
                                <input type="number" id="filterYear" class="form-control" placeholder="输入年份，如2024（不输入则不限制）" min="1900" max="2100">
                            </div>
                            <div class="col-md-6">
                                <label for="filterMonth" class="form-label">月份:</label>
                                <select id="filterMonth" class="form-select">
                                    <option value="">不限制月份</option>
                                    <option value="01">1月</option>
                                    <option value="02">2月</option>
                                    <option value="03">3月</option>
                                    <option value="04">4月</option>
                                    <option value="05">5月</option>
                                    <option value="06">6月</option>
                                    <option value="07">7月</option>
                                    <option value="08">8月</option>
                                    <option value="09">9月</option>
                                    <option value="10">10月</option>
                                    <option value="11">11月</option>
                                    <option value="12">12月</option>
                                </select>
                            </div>
                        </div>
                        <small class="form-text text-muted">筛选 date of publication 的值来确定生成的数据范围</small>
                    </div>
                </div>
                
                <div class="controls">
                    <button class="btn btn-primary" id="generateTechUpdateBtn" onclick="handleTechUpdateGenerate()">
                        <i class="bi bi-file-earmark-word"></i> 生成技术更新
                    </button>
                    <button class="btn btn-warning" id="resetTechUpdateBtn" onclick="handleTechUpdateReset()">重置</button>
                </div>
                
                <!-- 进度条 -->
                <div id="techUpdateProgressContainer" class="progress-container" style="display: none;">
                    <div class="progress-bar">
                        <div id="techUpdateProgressBar" class="progress-fill"></div>
                    </div>
                    <div id="techUpdateProgressText" class="progress-text">0%</div>
                </div>
                
                <!-- 结果显示区域 -->
                <div id="techUpdateResultSection" class="section" style="display: none;">
                    <h3>✅ 处理完成</h3>
                    <p id="techUpdateResultMessage"></p>
                    <div class="result-actions">
                        <button class="btn btn-success btn-sm" id="openResultBtn">打开文件</button>
                        <button class="btn btn-info btn-sm" id="openFolderBtn">打开文件夹</button>
                    </div>
                </div>
                
                <div class="section">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                        <h3 style="margin: 0; font-size: 0.95em;">📝 运行日志</h3>
                        <button class="btn btn-outline-secondary btn-sm" id="clear-tech-update-log-btn" title="清空日志">
                            <i class="bi bi-trash"></i> 清空
                        </button>
                    </div>
                    <div id="tech-update-log" class="log">等待操作...</div>
                </div>
            </div>
            
            <!-- 设置标签页 -->
            <div class="tab-content" id="settings-content">
                <div class="section">
                    
                </div>
            </div>
        </div>
    </div>
    
    <!-- JavaScript 功能文件引入 -->
    <script src="./info-update.js"></script>
    <script src="./tech-update/user-data.js"></script>
    <script src="./tech-update/tech-update.js"></script>
    <script type="module" src="./astm/astm-update.js"></script>
    <script src="./eucommission/eu-commission-ui.js"></script>
    
    <!-- Vanta 背景和插件信息初始化 -->
    <script type="module">
        import { initVantaBackground, destroyVantaBackground } from './vantaBackground.js';
        
        document.addEventListener('DOMContentLoaded', async() => {
            if (htmlUIAPI) {
                htmlUIAPI.injectWindowControls();
            }
            
            // 初始化 Vanta 背景
            if (typeof VANTA !== 'undefined') {
                initVantaBackground();
                
                // 页面卸载时销毁 Vanta 背景
                window.addEventListener('beforeunload', () => {
                    destroyVantaBackground();
                });
            } else {
                console.error('VANTA 库未正确加载');
            }
            
            // 侧边栏切换
            const menuToggle = document.getElementById('menu-toggle');
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('main-content');
            const sidebarOverlay = document.getElementById('sidebar-overlay');
            
            if (menuToggle && sidebar && mainContent) {
                menuToggle.addEventListener('click', () => {
                    sidebar.classList.toggle('open');
                    menuToggle.classList.toggle('active');
                    
                    // 使用adjustLayout函数调整布局
                    adjustLayout();
                });
            }
            
            // 菜单项点击事件
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单项的活动状态
                    menuItems.forEach(i => i.classList.remove('active'));
                    
                    // 添加当前菜单项的活动状态
                    item.classList.add('active');
                    
                    // 切换标签页
                    const tabId = item.getAttribute('data-tab');
                    switchTab(tabId);
                    
                    // 在移动设备上点击菜单项后关闭侧边栏
                    if (window.innerWidth < 992) {
                        // 延迟一点关闭侧边栏，让用户看到选中效果
                        setTimeout(() => {
                            sidebar.classList.remove('open');
                            menuToggle.classList.remove('active');
                            // 使用adjustLayout函数调整布局
                            adjustLayout();
                        }, 300);
                    }
                });
            });
            
            // 切换标签页函数
            function switchTab(tabId) {
                // 隐藏所有标签页内容
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                
                // 显示选中的标签页内容
                const selectedContent = document.getElementById(`${tabId}-content`);
                if (selectedContent) {
                    selectedContent.classList.add('active');
                }
            }
            
            // 点击遮罩层关闭侧边栏
            if (sidebarOverlay) {
                sidebarOverlay.addEventListener('click', () => {
                    sidebar.classList.remove('open');
                    menuToggle.classList.remove('active');
                    adjustLayout();
                });
            }
            
            // 默认打开侧边栏（在桌面设备上）
            if (window.innerWidth >= 992) {
                sidebar.classList.add('open');
                mainContent.classList.add('sidebar-open');
            }
            
            // 调整布局函数 - 根据窗口大小和侧边栏状态调整主内容区域
            function adjustLayout() {
                if (window.innerWidth < 992) {
                    // 小窗口模式下，确保内容区域不被遮挡
                    mainContent.style.marginLeft = '0';
                    mainContent.style.width = '100%';
                    
                    // 移除可能影响布局的类
                    mainContent.classList.remove('sidebar-open');
                    
                    if (sidebar.classList.contains('open')) {
                        // 侧边栏打开时，确保内容区域可见
                        document.body.style.overflow = 'hidden'; // 防止页面滚动
                        document.body.classList.add('sidebar-open'); // 添加类以控制body样式
                        
                        // 显示遮罩层
                        if (sidebarOverlay) {
                            sidebarOverlay.style.display = 'block';
                            setTimeout(() => {
                                sidebarOverlay.style.opacity = '1';
                            }, 10);
                        }
                        
                        // 添加一个临时类，用于小窗口下侧边栏打开时的特殊样式
                        mainContent.classList.add('mobile-sidebar-open');
                    } else {
                        // 侧边栏关闭时，恢复正常滚动
                        document.body.style.overflow = '';
                        document.body.classList.remove('sidebar-open'); // 移除body类
                        
                        // 隐藏遮罩层
                        if (sidebarOverlay) {
                            sidebarOverlay.style.opacity = '0';
                            setTimeout(() => {
                                sidebarOverlay.style.display = 'none';
                            }, 300); // 与CSS过渡时间相同
                        }
                        
                        mainContent.classList.remove('mobile-sidebar-open');
                    }
                } else {
                    // 大窗口模式下，根据侧边栏状态调整内容区域
                    mainContent.style.marginLeft = '';
                    mainContent.style.width = '';
                    document.body.style.overflow = ''; // 恢复正常滚动
                    document.body.classList.remove('sidebar-open'); // 移除body类
                    mainContent.classList.remove('mobile-sidebar-open');
                    
                    // 隐藏遮罩层（大窗口模式下不需要遮罩层）
                    if (sidebarOverlay) {
                        sidebarOverlay.style.opacity = '0';
                        sidebarOverlay.style.display = 'none';
                    }
                    
                    if (sidebar.classList.contains('open')) {
                        mainContent.classList.add('sidebar-open');
                    } else {
                        mainContent.classList.remove('sidebar-open');
                    }
                }
            }
            
            // 监听窗口大小变化，自适应调整布局
            window.addEventListener('resize', adjustLayout);
            
            // 初始调整布局
            adjustLayout();
        });
    </script>
</body>
</html>